<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>广告素材库</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
		<!--ios是否运行创建快捷启动方式-->
		<meta content="yes" name="apple-mobile-web-app-capable">
		<!--ios顶部通知栏的样式 黑色-->
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<!--遇到数字不让转成电话号码格式-->
		<meta content="telephone=no" name="format-detection">
		<script src="js/remstyle.js"></script>
		<link rel="stylesheet" href="assets/mui/css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="common/css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/min_page.css" />
		<link rel="stylesheet" type="text/css" href="css/sameInfo.css" />
		<link rel="stylesheet" type="text/css" href="css/material_phone.css" />
		<link rel="stylesheet" type="text/css" href="css/material_QR_code.css" />
		<link rel="stylesheet" type="text/css" href="css/material_link.css" />
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="application/javascript " src="js/jquery-1.7.2.min.js "></script>
		<script src="layer/layer.js"></script>
		<link rel="stylesheet" type="text/css" href="layer/skin/layer.css" />
		<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.css" />
		<script src="js/config.js"></script>
	</head>
	<style>
		.ad_top {
			width: 100%;
			position: relative;
		}
		
		.ad_top_img {
			width: 100%;
			height: auto;
		}
		
		.ad_top_text {
			width: 100%;
			height: auto;
			color: #fff;
			position: absolute;
			top: 0;
			bottom: 0;
			margin: auto;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			/*border: 1px solid red;*/
		}
		.ad_con{
			width: 100%;
			height: auto;
		padding: 0.2rem 0.23rem;
		box-sizing: border-box;
		
		}
		.ad_info{
			width: 100%;
			height:auto;
			background: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.ad_info_title{
			width: 100%;
			height: 0.88rem;
			line-height: 0.88rem;
			border-bottom: 1px solid #cdcdcd;
			color: #484848;
			padding-left: 0.20rem;
			box-sizing: border-box;
		}
		.ad_ino_infomation{
			margin-top: 0.18rem;
			width: 94%;
			height: 4.3rem;
			margin-bottom: 0.56rem;
		}
		.ad_commpany_name{
			width: 100%;
			height: 0.56rem;
			background: #66cca1;
			line-height: 0.56rem;
			padding-left: 0.2rem;
			box-sizing: border-box;
			color: #fff;
			font-size: 0.26rem !important;
		}
		.ad_person_info{
			width: 96%;
			height: 3rem;
			display: flex;
			flex-direction: row;
			border-bottom: 1px dashed #66cca1;
			margin: 0 auto;
		}
		.ad_person_info_left{
			width: 50%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: auto;
			justify-content: center;
		}
		.ad_person_top{
			
			display: flex;
			flex-direction: row;
			align-items: center;
		}
		.ad_person_top img{
			height: 1.3rem;
			width: auto;
		}
		.ad_person_top div{
			text-align: center;
			margin-left: 0.2rem;
		}
		.ad_person_bottom{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 0.2rem;
		}
		.ad_person_bottom img{
			width: 0.4rem;
			height: auto;
			margin-left: 0.1rem;
			margin-right: 0.1rem;
		}
		.ad_person_bottom span{
			color: #66cca1;
			font-size: 0.32rem !important;
		}
		.ad_person_info_right{
			width: 50%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.ad_person_info_right img{
			width: 2.1rem;
			height: auto;
		}
		.ad_ino_bottom{
			width: 98%;
			height: 0.7rem;
			line-height: 0.7rem;
			/*border: 1px solid red;*/
			margin-left: 2%;
			color: #66cca1;
			font-size: 0.26rem !important;
		}
		.ad_info_bottom{
			width: 100%;
			height: 0.82rem;
			display: flex;
			flex-direction: row;
			align-items: center;
			position: relative;
			border-top: 1px dashed #66cca1;
		}
		.ad_info_bottom img{
			width: 0.34rem;
			height: auto;
		}
		.ad_doubt{
			width: 100%;
			height:1.66rem;
			position: absolute;
			top: -1.51rem;
			left: 0;
			background: url("img_page/yiwen_bag.png") no-repeat center center;
			background-size: 98%;
			padding:0.1rem 0.3rem;
			box-sizing: border-box;
			color: #fff;
			display: none;
		}
		.ad_doubt_top{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			/*margin-bottom: 0.15rem;*/
		}
		.ad_doubt_top img{
			width: 0.21rem;
			height: auto;
		}
		input[type="checkbox"] {
			-webkit-appearance: none;
			/*清除复选框默认样式*/
			height: 20px;
			/*高度*/
			vertical-align: middle;
			width: 20px;
			border: 1px solid #a7a7a7;
			border-radius: 50%;
			margin-left:4%;
		}
		
		input[type="checkbox"]:checked {
			/*复选框的背景图，就是上图*/
			border: 1px solid #ee3b1e;
			background: url(img_page/check_red.png) no-repeat center center;
			background-size: 60%;
		}
	</style>

	<body>
		<!--顶部-->
		<div class="top" style="margin-bottom: 0 !important;">
			<div class="top-one" onclick="javascript :history.back(-1);">
				<span><img src="img_page/right.png"/></span>
			</div>
			<div class="point">
				<img src="img_page/3point.png" />
			</div>
		</div>
		<!--内容-->
		<div class="ad_top">
			<img class="ad_top_img" src="img_page/material_ad_top.jpg" />
			<div class="ad_top_text">
				<span>便捷的素材管理功能</span>
				<span>可一键添加广告到微单页文章中</span>
			</div>

		</div>
		<!--广告部分-->
		<div class="ad_con">
			<div class="ad_info">
				<div class="ad_info_title">系统广告</div>
				<div class="ad_ino_infomation">
					<div class="ad_commpany_name">{{v_ad_info.userMicroblong}}</div>
					<div style="border: 1px solid #b8b8b8;border-top: none;">
						<div class="ad_person_info">
						<!--左侧-->
						<div class="ad_person_info_left">
							<div class="ad_person_top">
								<img  :src="v_ad_info.userImg"/>
								<div >
									<span style="font-size: 0.3rem;">{{v_ad_info.userName}}</span>
									<br />
									<span style="font-size: 0.26rem;color: #707070;">{{v_ad_info.userTitle}}</span>
								</div>
							</div>
							<div class="ad_person_bottom">
								<img src="img_page/ad_phone.png" />
								<span >{{v_ad_info.userPhone}}</span>
							</div>
						</div>
						<!--右侧-->
						<div class="ad_person_info_right">
							<img  :src="v_ad_info.userWxImg"/>
						</div>
					</div>
					<div class="ad_ino_bottom">
						<span id="ad_wechat" onclick="ad_wechat()">点击更换个人二维码</span>
					</div>
						
					</div>
					
				</div>
				<!--系统广告底部-->
				<div class="ad_info_bottom">
					<input  type="checkbox" checked/>
					<span style="margin: 0 0.2rem;">设置为镜像同步</span>  
					<img class="doubt" src="img_page/yiwen.png" onclick="doubt()" />
					<div class="ad_doubt">
						<div class="ad_doubt_top">
							<span>镜像默认</span>
							<img  src="img_page/ad_close.png" onclick="close_doubt()"/>
						</div>
						<span style="font-size: 0.22rem;">
							为用户使用镜像功能的时候，自动添加所设置的广告素材到被推送或者主动镜像的微单页中。
						</span>
						
					</div>
				</div>
				
			</div>
			
		</div>
	</body>
<script>
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	function ad_wechat(){
		window.location.href = "b-cards-cardswechatcode.html?business="+c_user_id;
	}
	function doubt(){
		$(".ad_doubt").css({
			"display":"block"
		})
	}
	function close_doubt(){
		$(".ad_doubt").css({
			"display":"none"
		})
	}
	var ad_info = new Vue({
		el: '.ad_con',
		data:{
			v_ad_info:null
		},
		created: function() {
				this.getList();
			},
			methods:{
				getList: function() {
					console.log("11111");
					var that = this;
					$.ajax({
						type: "get",
						url:v_url+ "/wechat/adv/getUserInfo",
						data: {
							c_user_id:c_user_id
						},
						async: true,
						success: function(res) {
							console.log(res.data)
							var ad_info=res.data
							that.v_ad_info=ad_info;
						}
					});

				},
			}
	})
</script>
</html>